<template>
  <div>
    <el-card style="margin: 20px">
      <div>
        <!-- 按钮 -->
        <el-button class="add-btn" @click="openDialog('添加货品类型')">
          新增货品类型
        </el-button>
        <!-- 表格 -->
        <el-table :data="tableData" border stripe>
          <el-table-column
            align="center"
            label="序号"
            width="50"
            type="index"
          />
          <el-table-column
            prop="code"
            label="货品类型编号"
            width="200"
            align="center"
          />
          <el-table-column
            prop="name"
            label="货品类型名称"
            width="200"
            align="center"
          />
          <el-table-column
            prop="updateTime"
            label="更新时间"
            width="300"
            align="center"
          />
          <el-table-column align="center" label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="openDialog('编辑货品类型', scope.row.id)"
              >
                编辑
              </el-button>
              <el-button
                type="text"
                size="small"
                @click="deleteGoods(scope.row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页器 -->
      <el-pagination
        :page-sizes="[5, 10, 20, 40]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <!-- dialog 对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible="showDialog"
      width="30%"
      @close="btnCancel"
    >
      <el-form
        ref="goodsTypeForm"
        :model="goodsTypeForm"
        :rules="rules"
        label-position="top"
        label-width="80px"
      >
        <el-form-item label="货品类型编码" prop="code">
          <el-input v-model="goodsTypeForm.code" />
        </el-form-item>
        <el-form-item label="货品类型名称" prop="name">
          <el-input v-model="goodsTypeForm.name" />
        </el-form-item>
      </el-form>
      <!-- 底部 -->
      <el-row slot="footer" type="flex" justify="center">
        <el-col>
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button size="small" type="primary" @click="btnOK">确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { inspectionType, temperatureType, bearingType } from '../table-data-computed'
import {
  getGoodsTypeCode,
  getGoodsTypePage,
  delGoodsType,
  addGoodsType,
  editGoodsType,
  getGoodsTypeDetails
} from '@/api/goodstype'
export default {
  data() {
    return {
      tableData: [],
      pageConfig: { current: 1, size: 5 },
      total: 0,
      showDialog: false,
      dialogTitle: '添加货品类型',
      goodsTypeForm: { name: '', code: '' },
      rules: {
        name: [{ required: true, message: '请输入货品类型名称', trigger: 'blur' }],
        code: [{ required: true, message: '请输入货品类型编码', trigger: 'blur' }]
      }
    }
  },
  computed: { inspectionType, temperatureType, bearingType },
  created() {
    this.getData()
  },
  methods: {
    // 打开对话框
    async openDialog(text, id) {
      this.dialogTitle = text
      id
        ? this.goodsTypeForm = (await getGoodsTypeDetails(id)).data.data
        : this.goodsTypeForm.code = (await getGoodsTypeCode()).data.data
      this.showDialog = true
    },
    // 对话框取消按钮
    btnCancel() {
      this.showDialog = false
      this.goodsTypeForm.code = ''
      this.goodsTypeForm.name = ''
    },
    // 对话框确定按钮
    async btnOK() {
      await this.$refs.goodsTypeForm.validate()
      // 通过检验 发送请求
      this.dialogTitle === '添加货品类型'
        ? await addGoodsType(this.goodsTypeForm) : await editGoodsType(this.goodsTypeForm)
      this.$message.success(this.dialogTitle + '成功')
      this.btnCancel()
      this.getData()
    },

    // 删除货品
    async deleteGoods(id) {
      await delGoodsType(id)
      this.$message.success('删除成功')
      this.getData()
    },
    // 获取货品分页数据
    async getData(searchQuery = '') {
      const res = await getGoodsTypePage(this.pageConfig, searchQuery)
      const { records, total, cuttent, size } = res.data.data
      this.tableData = records
      this.total = Number(total)
      this.pageConfig.current = cuttent
      this.pageConfig.size = size
    },
    // 分页器方法
    handleSizeChange(val) {
      this.pageConfig.size = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.pageConfig.current = val
      this.getData()
    }
  }
}
</script>
<style scoped lang="scss">
@import "@/styles/table.scss";
</style>
